//loading层

var tip = layer.load(1, {
    shade: ['black'] //0.1透明度的白色背景
  });
// 获取cookie
http=getCookie('http')
// 发送ajax渲染页面
var howmuch
$.get("./php/detail.php", {http:http},function (res) {
   var {name,http,http2,http3,http4,introducr,price,pricet1,pricet2}=res[0]
   howmuch=price
   $('.detail-title ul li:last').text(name)
   $('.show-title h1').text(introducr).next().find('span').html([pricet1]).next().text(pricet2)
    $('.price em').text(price)
    $('.result li:first').html('￥'+price)
    $('.show-box img').attr('src',http).parent().next().find('img').attr('src',http).parent().next().find('img').attr('src',http).parent().next().find('img').attr('src',http2).parent().next().find('img').attr('src',http3).parent().next().find('img').attr('src',http4)
    removeCookie('http',path='/')
    layer.close(tip)
}, "json");



//页面卷曲高度到达一定比例，左侧展示图片，保持窗口静止函数封装
function scroll(ele) {
    window.onscroll = function () {
        var speed = document.documentElement.scrollTop || document.body.scrollTop
        if (speed >= 200 && speed <= 1200) {
            ele.style.position = 'fixed';
            ele.style.top = 0 + 'px'
        }
        else if (speed > 1200) {
            ele.style.position = 'absolute';
            ele.style.top = 1000 + 'px'
        }
        else {
            ele.style.position = 'absolute';
            ele.style.top = 0
        }
    }
}



// 鼠标移入左侧下方小图片，实现图片的切换
// 获取小图片
$imgs = $('.show-img dd img')

// 鼠标移入左侧下方小图片，实现图片的切换
$imgs.mouseover(function () {
    $('.show-img>dt>img').attr('src', $(this).attr('src'))
    $(".show-box>img").attr('src', $(this).attr('src'))
})
// 鼠标移入，遮罩跟着鼠标位置
$('.show-img>dt').hover(function () {
    // 遮罩出现
    $('.shade').css('display', 'block')
    //放大图出现
    $('.show-box').css('display', 'block')

    // 遮罩位置跟着鼠标
    $(this).mousemove(function (e) {
        var x = e.pageX
        var y = e.pageY
        var left = x - $('.show-img>dt>img').offset().left - $('.shade').width() / 2 + 'px'
        var top = y - $('.show-img>dt>img').offset().top - $('.shade').height() / 2 + 'px'
        if (parseFloat(left) < 0) {
            left = 0
        }
        if (parseFloat(top) < 0) {
            top = 0
        }
        $('.shade').css({
            left, top
        })
        if (parseFloat(left) >= $('.show-img>dt>img').width() - $('.shade').width()) {
            left = $('.show-img>dt>img').width() - $('.shade').width() + "px"
        }
        if (parseFloat(top) >= $('.show-img>dt>img').height() - $('.shade').height()) {
            top = $('.show-img>dt>img').height() - $('.shade').height() + "px"
        }
        $('.shade').css({
            left, top
        })
        // 放大图变换位置
        var bigLeft = parseFloat(left) / $('.show-img>dt>img').width() * $('.show-box>img').width()
        var bigTop = parseFloat(top) / $('.show-img>dt>img').height() * $('.show-box>img').height()
        $('.show-box>img').css({
            left: -bigLeft + "px",
            top: -bigTop + "px"
        })

    })
}, function () {
    $('.shade').css('display', 'none')
    $('.show-box').css('display', 'none')
})

// 点击颜色选取区效果
$('.col>button').click(function () {
    $(this).parent().find('button').css({
        borderColor: 'rgb(196, 194, 194)',
        color: 'rgb(92, 91, 91)'
    })
    $(this).css({
        borderColor: 'red',
        color: 'red'
    })
    // 样式
    $('.result li').eq(3).text($(this).text())

})

// 手机可选服务的效果
var that = null
$('.server input:radio').click(function () {
    if (!that) {
        $(this).prop('checked', true)
        that = $(this)
    } else {
        if ($(this).attr('check') === that.attr('check')) {
            $(this).prop('checked', false)
            that = null
        } else {
            that = $(this)
        }
    }
})

// 数量效果
// 减号
$('.number>button:first').click(function () {
    if ($(this).next().text() == '1') {
        return false
    }
    $(this).next().text($(this).next().text() - 1)
    money = $(this).next().text()
    // 最终结果
    // 价格
    $('.result li:first').text('￥' + money * howmuch/1)
    // 件数
    $('.result b').text(money)

})
// 加号
$('.number>button:last').click(function () {
    if ($(this).prev().text() == '5') {
        return false
    }
    $(this).prev().text($(this).prev().text() / 1 + 1)
    money = $(this).prev().text() / 1 + 1
    // 最终结果
    // 价格
    $('.result li:first').text('￥' + money * howmuch/1)
    // 件数
    $('.result b').text(money - 1)
})


//  分期付款

var kk = null
$('.payment input:radio').click(function () {
    if (!kk) {
        $(this).prop('checked', true)
        kk = $(this)
    } else {
        if ($(this).attr('check') === kk.attr('check')) {
            $(this).prop('checked', false)
            kk = null
        } else {
            kk = $(this)
        }
    }
})



// 点击加入购物车
$('.cart').click(function () {
    // 判断用户是否登录
    if (getCookie('phone')) {
        // 将数据全部转化为字符串
        obj = {
            //名称
            name: $('.detail-title ul li:last').text(),
            // 样式
            style: $('.result li').eq(3).text(),
            //价格
            coin: $('.result li:first').text(),
            //数量
            number: $('.result b').text(),
            // 图片
            picture: $('.show-img>dt>img').attr('src')
        }
        // 判断本地存储是否有数据
        var data = localStorage.getItem('data')
        if (!data) {
            // 没有数据
            var arr = []
            arr.push(obj)
            var data = JSON.stringify(arr)
            localStorage.setItem('data', data)
        } else {
            // 有数据
            var arr = JSON.parse(data)
            arr.push(obj)
            var data = JSON.stringify(arr)
            localStorage.setItem('data', data)
        }
        layer.msg('购物车加入成功', {
            icon: 1,
            time:1200
        });
    } else {
        layer.alert('您还没登录呢，请先登录哦')
    }
})

// 点击立刻购买转跳到购物车界面
$('.cart').next().click(function(){
    location.href='cart.html'
})

// 关闭界面删除cookie
